<template>
  <back-dialog-base
    :title="title"
    :visible="visibleDialog"
    width="25rem"
    @onCommit="handleSubmit"
    @onCloesa="closeDlog"
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="医院名称：" prop="hospitalName">
                  <el-input
                    v-model="form.hospitalName"
                    placeholder="请输入…"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="医院级别：" prop="hospitalLevel">
                  <el-input
                    v-model="form.hospitalLevel"
                    placeholder="请输入…"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="医院地址：" prop="hospitalAddress">
                  <el-input
                    v-model="form.hospitalAddress"
                    placeholder="请输入…"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="医护人员数量：" prop="personnelQuantity">
                  <el-input
                    v-model="form.personnelQuantity"
                    placeholder="请输入…"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="床位：" prop="bedNumber">
                  <el-input
                    v-model="form.bedNumber"
                    placeholder="请输入…"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话：" prop="contactNumber">
                  <el-input
                    v-model="form.contactNumber"
                    placeholder="请输入…"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="描述：" prop="remark">
                  <el-input
                    v-model="form.remark"
                    placeholder="请输入…"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, watch } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { ListId, ListSave } from '@/api/hospital'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const emits = defineEmits(['onReload'])
const formRef = ref(null)
const form = reactive({
  hospitalName: '',
  hospitalLevel: '',
  hospitalAddress: '',
  personnelQuantity: '',
  bedNumber: '',
  contactNumber: '',
  remark: '',
  mainEquipment: '',
  installTime: '',
  lampPostFirm: '',
  manageDepartment: '',
  constructUnit: '',
  remarks: '',
  state: 0
})
const rules = reactive({
  hospitalName: [
    {
      required: true,
      message: '医院名称不能为空',
      trigger: 'blur'
    }
  ],
  hospitalLevel: [
    {
      required: true,
      message: '医院级别不能为空',
      trigger: 'blur'
    }
  ],
  hospitalAddress: [
    {
      required: true,
      message: '医院地址不能为空',
      trigger: 'blur'
    }
  ],
  personnelQuantity: [
    {
      required: true,
      message: '医护人员数量不能为空',
      trigger: 'blur'
    }
  ],
  bedNumber: [
    {
      required: true,
      message: '床位不能为空',
      trigger: 'blur'
    }
  ],
  contactNumber: [
    {
      required: true,
      message: '联系电话不能为空',
      trigger: 'blur'
    }
  ],
  installTime: [
    {
      required: true,
      message: '安装时间不能为空',
      trigger: 'blur'
    }
  ],
  manageDepartment: [
    {
      required: true,
      message: '管理部门不能为空',
      trigger: 'blur'
    }
  ],
  lampPostFirm: [
    {
      required: true,
      message: '灯杆厂商不能为空',
      trigger: 'blur'
    }
  ],
  constructUnit: [
    {
      required: true,
      message: '施工单位不能为空',
      trigger: 'blur'
    }
  ],
  remark: [
    {
      required: true,
      message: '描述不能为空',
      trigger: 'blur'
    }
  ],
  mainEquipment: [
    {
      required: true,
      message: '主要装备不能为空',
      trigger: 'blur'
    }
  ]
})

const tagsLamp = ref([])
const tagsCamera = ref([])
const tagsScreen = ref([])
const closeDlog = () => {
  formRef.value.resetFields()
  clearForm()
  emits('onCloes')
}
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      save(Object.assign(props.rowData, form))
      console.log('验证通过')
    } else {
      console.log('验证错误')
      return false
    }
  })
}

const save = async (data) => {
  const res = await ListSave(data)
  if (res && res.id) {
    if (props.title === '编辑医院') {
      message({ type: 'success', message: '医院编辑成功!' })
    } else {
      message({ type: 'success', message: '医院添加成功!' })
    }

    clearForm()
    emits('onReload')
  }
}
const getlamp = async (id) => {
  const res = await ListId({ id })
  return res
}

watch(
  () => props.rowData,
  () => {
    form.hospitalName = props.rowData.hospitalName
    form.hospitalLevel = props.rowData.hospitalLevel
    form.hospitalAddress = props.rowData.hospitalAddress
    form.personnelQuantity = props.rowData.personnelQuantity
    form.bedNumber = props.rowData.bedNumber
    form.contactNumber = props.rowData.contactNumber
    form.remark = props.rowData.remark
    form.mainEquipment = props.rowData.mainEquipment
    console.log('props.rowData', props.rowData.hospitalName)
    if (props.rowData.id) {
      const rowDataP = getlamp(props.rowData.id)
      //这里只回显一个，演示用，具体逻辑先不管了
      rowDataP.then((rowData) => {})
    } else {
      // clearForm()
    }
  }
)

const clearForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  form.value = {
    hospitalName: '',
    hospitalLevel: '',
    hospitalAddress: '',
    personnelQuantity: '',
    bedNumber: '',
    contactNumber: '',
    remark: '',
    mainEquipment: '',
    installTime: '',
    lampPostFirm: '',
    manageDepartment: '',
    constructUnit: '',
    remarks: '',
    state: 0
  }
}
</script>

<style lang="scss" scoped>
.content-warp {
  width: 100%;
  height: 100%;
  display: flex;
  .left-form {
    flex: 4;
  }
  .right-form {
    flex: 6;
    height: 780px;
    overflow: auto;
    padding-left: 60px;
    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #d6d6d680;
      border-radius: 20px;
    }
    .item-form {
      width: 100%;
      display: flex;
      margin-bottom: 30px;
      .title {
        width: 80px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        line-height: 19px;
        color: #333333;
        display: flex;
        .line-tag {
          width: 4px;
          height: 14px;
          background: #ff9502;
          border-radius: 4px;
          margin-right: 5px;
        }
      }
      .form-content {
        width: calc(100% - 120px);
        display: flex;
        flex-direction: column;
        .btns-row {
          width: 100%;
          height: 35px;
          display: flex;
          position: relative;
          margin-bottom: 6px;
          .tags {
            width: calc(100% - 45px);
            display: flex;
            column-gap: 4px;
            overflow-x: auto;
            &::-webkit-scrollbar-track-piece {
              background: #d3dce6;
            }

            &::-webkit-scrollbar {
              width: 3px;
              height: 3px;
            }

            &::-webkit-scrollbar-thumb {
              background: #ff9502;
              border-radius: 20px;
            }
          }
          .add-btn {
            width: 40px;
            height: 32px;
            background: rgba(255, 255, 255, 0.39);
            border: 1px solid #ff9502;
            border-radius: 5px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 30px;
            color: #ff9502;
            text-align: center;
            position: absolute;
            right: 0;
            cursor: pointer;
            &:hover {
              background: rgba(255, 255, 255, 0.22);
            }
          }
        }
        .form-card {
          width: 100%;
          border: 1px solid #d3dbe5;
          border-radius: 4px;
          padding: 20px;
        }
      }
    }
  }
}
</style>
